<template>
    <div style="background-color: #ffffcc">
        <div>使用作用域插槽举例：</div>
        <div>
            <div style="fontsize: 16px; background-color: grey">
                header:
                <slot name="header"></slot>
            </div>
            <div>
                content:
                <div v-for="(item, index) in list" :key="item">
                    <slot :scop-user="item" :scop-index="index"></slot>
                </div>
            </div>
            <div style="color: grey">
                footer:
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: ["guoxudong", "guoqianhui"],
        };
    },
};
</script>
